<!-- AI-report报表 -->
<template>
 <div class='container-ai-report stop-swiping'>
    <!-- 返回键+AI报表 -->
    <van-nav-bar title="AI报表" @click-left="goBack"   @click-right="showTable" :border="true" :z-index="100" >
        <!-- <span class="el-icon-arrow-left fontsize" slot="left"></span> -->
        <span class='van-nav-bar__right ai_report_nav_img' slot="right"  v-show="active==4 ">
            <img src="../../assets/imgs/screen.png" alt="">
        </span>
    </van-nav-bar>

    <van-tabs v-model="active" swipeable  :line-width='70'>
        <van-tab :title="item.title" class='ai_report_tabs' v-for="(item, index) in tabData" :key="index">
          <div class="al-report-table" v-if="selectItem.ID">
            <div class="ai_report_selectTable_title">
              <ul>
                <li style="width:92%;text-indent:1em;">{{selectItem.ID ? selectItem.ReportName : ''}}</li>
                <li style="width:7%;" @click="show=true">
                  <div style="border-top:10px solid #fff;border-left: 6.5px solid transparent;border-right: 6.5px solid transparent;"></div>
                </li>
              </ul>
            </div>
            <div class="ai_report_selectTable_list">
              <div style="height: 100%;width: 100%;">
                <iframe style="width: 100%;height: 100%;" :src="`http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=true&_xdoc=${selectItem.ReportPath}`" id="AI_IFRAME" ></iframe>
              </div>
            </div>
          </div>
          <div class="ai-report-no" v-else>
            <img src="../../assets/imgs/AI_report_no.png"/>
            <p>暂无数据</p>
          </div>
        </van-tab>
    </van-tabs>


  <van-popup class="pop" v-model="show" position="bottom" :style="{ 'max-height': '6.3rem', overflow: 'hidden' }">
    <div style="text-align: center;width: 100%;height: 1rem;line-height: 1rem;background-color: #f5f5f5;position: absolute;top: 0;font-size: .5rem;">选择报表</div>
    <div style="margin-top: 1rem;max-height: 5.5rem;overflow-y: auto;">
      <van-list v-model="isLoading" :finished="finished" @load="onRefresh">
        <van-cell
          class="AIReport_popup"
          v-for="(item, index) in (whichActiveData ? unfinishedList : completeList)"
          :key="index"
          :title="item.ReportName"
          @click="toSelectItem(item)"
        />
      </van-list>
    </div>
  </van-popup>

 </div>
</template>
<script type='textecmascript-6'>
// import allTable from './components/allTable'
import {GetReportFormList} from '@/api/api.js'
import { setInterval, clearInterval } from 'timers';

export default {
  // components:{allTable},
  data() {
    return {
      loading: false,   //iframe是否处于加载状态
      toast: null,
      finished: false,  //是否已加载完所有数据
      isLoading: false,   //是否处于下拉刷新状态
      active:0,   //左右滑动在那个模块

      show: false, //弹出层是否显示

      ReportType:1, //table 1.施工日志2.节点对比5.自定义6.施工方案7.技术交底8.质量控制9.安全管理10.三算对比
      pageIndex:1,
      pageSize:20,
      unfinishedList:[], //无未成列表
      Count:0, //已完成条数
      Message:0, //未完成条数
      completeList:[], //完成列表
      immatureList:[], //未完成列表
      tabData: [
        {title: '施工日志'},
        {title: '施工方案'},
        {title: '技术交底'},
        {title: '节点对比'},
        {title: '自定义报表'}
      ],
      selectItem: {},
      selectItemIsChange: false
    }
  },
  created(){
    this.$store.commit('GET_PAGE_ACTIVE',3)
  },
  watch:{
    $route(to,from){
      this.active = 0
      this.ReportType = 1
    },
    selectItem(val){
      if (this.selectItemIsChange) {
        this.selectItemIsChange = false
        return
      }
      this.loading = true
      let _setInterval = setInterval(()=>{
        const iframe = document.querySelector('#AI_IFRAME')
        if (iframe) {
          if (iframe.attachEvent) {
            iframe.attachEvent("onload", ()=> {    
              this.loading = false
              clearInterval(_setInterval)
            });    
          } else {
            iframe.onload = ()=> {
              this.loading = false
              clearInterval(_setInterval)
            };
          }
        } else {
          this.loading = false
          clearInterval(_setInterval)
        }
      }, 300)
    },
    loading(val) {
      if (!val) {
        this.toast.clear()
        return
      }
      this.toast = this.$toast.loading({
        mask: true,
        duration: 12000,       // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '报表加载中'
      })
    },
    active(val) {
      this.tabsActive(val)
    }
  },
  mounted(){
    this.$store.commit('GET_PAGE_ACTIVE',3  )
    if(this.$route.query.active){ //自定义列表返回值
      this.active = this.$route.query.active
      this.ReportType = 5
    }
    this.GetReportFormList()
  },
  methods:{
    onRefresh() {       //下拉刷新
        setTimeout(() => {
            this.pageIndex++
            this.GetReportFormList()
        }, 500);
    },
    GetReportFormList(){ //获取AI报表列表
        let params = {
            ProjectID:localStorage.getItem('projectid'),
            ReportType:this.ReportType,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
        }
        // console.log('获取AI报表列表',params)
        this.loading = true
        this.Request(GetReportFormList(params)).then(res=>{
          this.loading = false
          this.isLoading = false
          if(res.StatusCode=='200'){
            if (this.pageIndex >= (res.Count%this.pageSize === 0 ? res.Count/this.pageSize : res.Count<this.pageSize ? 1 : parseInt(res.Count/this.pageSize)+1)) {
              this.finished = true
            }
            this.Count = res.Count
            this.Message = res.Message
            // 6/7状态 有未完成列表
            if(this.ReportType == 6 || this.ReportType == 7){
              for (let i=0; i<res.Detiel[0].ReportFormTrueList.length; i++) {
                this.completeList.push(res.Detiel[0].ReportFormTrueList[i])
              }
              for (let j=0; j<res.Detiel[0].ReportFormFalseList.length; j++) {
                this.immatureList.push(res.Detiel[0].ReportFormFalseList[j])
              }
            }else{
              for (let j=0; j<res.Detiel[0].ReportFormList.length; j++) {
                this.unfinishedList.push(res.Detiel[0].ReportFormList[j])
              }
            }
            let _selectItem = null
            if (this.whichActiveData) {
              _selectItem = res.Detiel[0].ReportFormList && res.Detiel[0].ReportFormList.length > 0 ? res.Detiel[0].ReportFormList[0] : {}
            } else {
              _selectItem = res.Detiel[0].ReportFormTrueList && res.Detiel[0].ReportFormTrueList.length > 0 ? res.Detiel[0].ReportFormTrueList[0] : {}
            }
            if (_selectItem && _selectItem.ID && this.selectItem.ID === _selectItem.ID) {
              this.selectItemIsChange = true
            }
            this.selectItem = _selectItem
          }else{
            this.$message({type:"error",message:res.Message,center:"true"});
          }
        })
    },
    tabsActive(index){ //切换table
      this.pageIndex = 1
      this.completeList = []
      this.immatureList = []
      this.unfinishedList = []
      if(index == 0){
        this.ReportType = 1
      }else if(index == 1){
        this.ReportType = 6
      }else if(index == 2){
        this.ReportType = 7
      }else if(index == 3){
        this.ReportType = 2
      }else if(index == 4){
        this.ReportType = 5
      }
      this.finished = false
      this.GetReportFormList()
    },
    buildingTypeClick(url){ //预览url
      if(url){
        // window.location.href = `http://view.officeapps.live.com/op/view.aspx?src=${url}`
        this.$router.push({path: '/AIstatement', query:{url:url,active: this.active}})
      }else{
        this.$message({type:'warning',message:'文件不存在',center:'true'})
      }    
    },
    //标题右侧的图标
    showTable(){
      console.log('点击右侧的小图标');
      this.$router.push('/custom-report')
    },
    toSelectItem(item) {
      this.selectItem = item
      this.show = false
    },
    //返回
    goBack() {
      this.$router.push({ path: "../index/index" });
    }
  },
  computed: {
    whichActiveData: function () {
      /*根据不同tab选择不同数据集合跟参数
       *施工日志、节点对比、自定义报表(active为0、3、4)调用unfinishedList、ReportName，施工方案、技术交底(active为1、2)调用completeList、SchemeName
      */
      return [0, 3, 4].indexOf(this.active) !== -1 ? true : false
    }
  }
}

</script>
<style lang='stylus' scoped rel='stylesheet/stylus'>
.container-ai-report
  width 100%
  height 100%
  background-color #F6F8FA
  box-sizing border-box
  position: relative;
  .fontsize
    font-size: 36px;
  .van-tabs__content
  .ai_report_tabs
    overflow hidden
    height auto
    width 100%
    background-color #ffffff
  .ai_report_tabs_us
    overflow auto
    height 73vh
    width 100%
    background-color #F6F8FA
  .ai_report_selectAll 
    width 100%
    height  410px
    box-sizing border-box
    padding 32px 26px
    font-size 28px
    background-color #ffffff
  .ai_report_right
    text-align right
    padding-right 15px

  // select的新写法
  .ai_report_selectSpan
    border 2px solid #649BFF
    border-radius 6px 
    width 100%
    font-size 24px
    display inline-block
    padding-left 15px
    box-sizing  border-box
    height 58px
  .ai_report_selectImg
    display inline-block
    width 0px
    height 0px
    border-left 6px solid transparent
    border-right 6px solid transparent
    border-top 10px solid #649BFF
    float right
    margin-right 15px
    margin-top 20px
  .ai_report_selectAll .el-row
    width 100%
    height 58px
    line-height 58px
    margin-bottom 20px
  .ai_report_selectAll_foot
    padding-top 30px
    height 120px
    width 100%
    box-sizing border-box
    text-align  center
  .ai_report_button
    background rgba(100,155,255,1)
    box-shadow 0px 3px 7px 0px rgba(91,140,237,0.13)
    border-radius 8px
    font-size 28px
    font-family PingFang-SC-Bold
    font-weight bold
    color rgba(255,255,255,1)
    padding 17px  53px
    border 0


 


   

</style>
<style>
/* 顶部表头 */
.container-ai-report .van-nav-bar .van-nav-bar__title {
    font-size: 36px;
    font-weight: 400;
}
.container-ai-report  .van-nav-bar {
    height: 88px;
    line-height: 88px;
 }
 .container-ai-report  .ai_report_nav_img img{
    height: 37px;
    width: 41px;
 }
  .container-ai-report  .ai_report_nav_img {
      float: right;
      position: relative;
      top :10px;
  }
/* 左右滑动标签页的样式更改 */
.container-ai-report  .van-tabs__line{
  background-color: #5B8DEE;
} 
.container-ai-report .van-tabs--line  .van-tabs__wrap{
  height: 88px;
}
.container-ai-report .van-tabs--line  .van-tabs__nav{
  height: 88px;
}
.container-ai-report  .van-ellipsis{
  width: 100%;
  color :#6B6B6B;
  height: 88px;
  font-size: 28px;
  line-height: 88px;
  /* font-weight:bold; */
  font-family:PingFang-SC-Bold;
}
.container-ai-report .van-tabs__nav .van-tab--active .van-ellipsis{
  color:rgba(91,140,238,1);
}
.container-ai-report .van-tabs--line{
  padding-top:110px;
}

/* 表格样式更改 */
.container-ai-report .el-table .cell{
    height: 60px;
    line-height: 60px;
    font-size:24px
}
.ai_report_selectTable_title{width: 100%;height: auto;}
.ai_report_selectTable_list{width: 100%;height: calc(100vh - 5rem);overflow: hidden;background-color: #f7f7f7;}
.ai_report_selectTable_title ul,.ai_report_selectTable_list ul{width: 100%;height: 88px;background: #5a92ff;}
.ai_report_selectTable_title ul li,.ai_report_selectTable_list ul li{height: 88px;font-size:30px;display:inline-block; font-family:PingFang-SC-Bold;font-weight:bold;color: #fff;float: left;display: flex;align-items: center;}
.ai_report_selectTable_list ul{background: #fff;}
.ai_report_selectTable_list ul li{color :#6B6B6B;font-weight: 400;font-size: 22px;}
.ai_report_selectTable_list_title{width: 100%;height: 45px;line-height: 45px;background: #e8f0ff;color: #333;}
.ai_report_selectTable_list_title p{width: 20%;text-align: center;}
.no-data{line-height: 88px;text-align: center;color: #999;}

.AIReport_popup{
  text-align: center;
  padding: .5rem .2rem;
  border-bottom: 1px solid #f7f7f7;
  font-size: .5rem;
}
.ai-report-no{
  background-color: #F6F8FA;
}
.ai-report-no img{
  width: 50%;
  margin-left: 25%;
  margin-top: 10%;
}
.ai-report-no p{
  text-align: center;
  font-size: 28px;
  margin-top: 56px;
}
/* .container-ai-report .van-popup{
  position: absolute;
} */
.pop.van-popup.van-popup--bottom {
    position: absolute;
    left: 50%;
}
.container-ai-report .van-overlay{
  position: absolute; 
}
</style>